<template>
  <div>
    <el-input v-model="selectName" readonly :disabled="disabled" :placeholder="placeholder"
      ><el-button slot="append" icon="el-icon-search" @click="show" :disabled="disabled"></el-button
    ></el-input>
    <x-dialog
      title="选择询价单"
      :close-on-click-modal="false"
      :show.sync="visible"
      v-if="visible"
      class="enquiry-dialog"
      append-to-body
      width="900px"
      :before-close="handleClose"
      @onCancel="handleClose"
      @onSubmit="handleSubmit"
    >
      <el-form :model="searchParams" ref="form" class="dialog-fliter">
        <el-row :gutter="20">
          <x-col>
            <el-form-item label="询价单号">
              <el-input v-model="searchParams.number" placeholder="请输入询价单号"></el-input>
            </el-form-item>
          </x-col>
          <x-col>
            <el-form-item label="询价标题">
              <el-input v-model="searchParams.title" placeholder="请输入询价标题"></el-input>
            </el-form-item>
          </x-col>
          <x-col>
            <div class="search-btns">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </x-col>
        </el-row>
      </el-form>
      <x-table
        :data-source="tableData"
        size="mini"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
        :pagination="pagination"
        :loading="loading"
        :row-key="'id'"
        :height="338"
      >
        <el-table-column width="60">
          <template #default="scope">
            <!-- label值要与el-table数据id实现绑定 -->
            <el-radio v-model="checked" :label="scope.row.id" @change="handleRowSelect(scope.row)">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="询价单号"></el-table-column>
        <el-table-column prop="title" label="询价标题"></el-table-column>
        <el-table-column prop="purchaseOrg" label="采购组织"></el-table-column>
        <el-table-column prop="beginDate" label="开始时间"></el-table-column>
        <el-table-column prop="endDate" label="结束时间"></el-table-column>
      </x-table>
    </x-dialog>
  </div>
</template>
<script>
  import { TableListMixin, PermissionsMixin } from '@package/utils'
  import { listUrl } from './api'

  export default {
    components: {},
    mixins: [TableListMixin, PermissionsMixin],
    props: {
      supplierId: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      state: {
        type: Number,
        default: 2
      }
    },
    data() {
      return {
        selectName: '',
        visible: false,
        searchParams: {
          title: '',
          number: ''
        },
        otherParam: {
          state: this.state
        },
        listUrl,
        tableData: [],
        checked: null,
        selectData: [] // 选中的数据
      }
    },
    watch: {
      supplierId(val) {
        this.checked = val
      },
      value(val) {
        this.selectName = val
      }
    },
    methods: {
      show() {
        this.visible = true
        this.handleSearch()
      },
      handleSearch(val) {
        this.queryParam = { ...this.searchParams, ...val }
        this.loadData()
      },
      handleReset() {
        this.$refs.form.resetFields()
        this.resetSearch()
      },
      // 单选某行选中
      handleRowSelect(row) {
        this.selectData = [row]
      },
      // 弹窗关闭
      handleClose() {
        this.checked = null
        this.selectData = []
        this.visible = false
      },
      // 弹窗确定
      handleSubmit() {
        if (this.selectData.length) {
          this.selectName = this.selectData[0].fullName
          this.$emit('on-change', this.selectData[0])
          this.handleClose()
        } else {
          this.$message.error('请选择一条数据点击确定')
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .enquiry-dialog {
    .dialog-fliter {
      // margin-bottom: 10px;
    }
    .x-table-container {
      height: 380px;
    }
    ::v-deep .el-form-container {
      background: none;
      box-shadow: none;
      border: none;
    }
    ::v-deep .el-form-content {
      padding: 0;
    }
    .search-btns {
      align-items: flex-end;
      display: flex;
      height: 70px;
    }
  }
</style>
